<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>基本资料</el-breadcrumb-item>
    </el-breadcrumb>

    <h4>修改用户信息</h4>
    <!-- 用户资料填写区域 -->
    <el-form label-position="right" label-width="80px" :model="formUserInfo" class="useinfoForm">
      <el-form-item label="登录名称">
        <el-input v-model="formUserInfo.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="formUserInfo.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="formUserInfo.email"></el-input>
      </el-form-item>
      <el-button class="btn1" type="success" @click="submit">提交</el-button>
      <el-button class="btn2" type="info" @click="reset">重置</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Userinfo',
  data() {
    return {
      formUserInfo: {
        username: '',
        nickname: '',
        email: '',
        id: '',
      },
    }
  },
  // 生命周期函数 打开页面即调用
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const { data: res } = await this.$http.get('my/userinfo')
      if (res.status !== 0) return this.$message.error(res.message)
      this.formUserInfo.username = res.data.username
      this.formUserInfo.nickname = res.data.nickname
      this.formUserInfo.email = res.data.email
      this.formUserInfo.id = res.data.id
    },
    async submit() {
      let params = new URLSearchParams()
      params.append('nickname', this.formUserInfo.nickname)
      params.append('email', this.formUserInfo.email)
      params.append('id', this.formUserInfo.id)
      const { data: res } = await this.$http.post('my/userinfo', params)
      if (res.status !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
    },
    reset() {
      this.formUserInfo.nickname = ''
      this.formUserInfo.email = ''
    },
  },
}
</script>

<style>
.useinfoForm {
  margin-top: 50px;
}
.btn1 {
  width: 150px;
  height: 36px;
  float: left;
  margin-top: 15px;
  margin-left: 100px;
}
.btn2 {
  width: 150px;
  height: 36px;
  float: left;
  margin-top: 15px;
  margin-left: 280px;
}
</style>
